<template>
	<view>
		<cmd-nav-bar back title="信息设置"></cmd-nav-bar>
		<cmd-page-body type="top">
			<cmd-transition name="fade-up">
				<view>
					<cmd-cel-item title="头像" slot-right arrow>
						<cmd-avatar :src="avatar"></cmd-avatar>
					</cmd-cel-item>
					<cmd-cel-item title="账号" :addon="userName" arrow></cmd-cel-item>
					<cmd-cel-item title="昵称" :addon="nickName" arrow></cmd-cel-item>
					<cmd-cel-item title="姓名" :addon="name" arrow></cmd-cel-item>
					<cmd-cel-item title="性别" :addon="sex" arrow></cmd-cel-item>
					<cmd-cel-item title="学/工号" :addon="number" arrow></cmd-cel-item>
					<!-- <cmd-cel-item title="修改密码" @click="fnClick('modify')" arrow></cmd-cel-item> -->
					<button class="btn-logout" @click="logout()">退出登录</button>
				</view>
			</cmd-transition>
		</cmd-page-body>
	</view>
</template>

<script>
	import cmdNavBar from "@/components/cmd-nav-bar/cmd-nav-bar.vue"
	import cmdPageBody from "@/components/cmd-page-body/cmd-page-body.vue"
	import cmdTransition from "@/components/cmd-transition/cmd-transition.vue"
	import cmdCelItem from "@/components/cmd-cell-item/cmd-cell-item.vue"
	import cmdAvatar from "@/components/cmd-avatar/cmd-avatar.vue"
	import {
		mapGetters
	} from 'vuex'

	export default {
		components: {
			cmdNavBar,
			cmdPageBody,
			cmdTransition,
			cmdCelItem,
			cmdAvatar
		},

		data() {
			return {
				avatar:"",
				userName:"",
				nickName:"",
				name:"",
				sex:"",
				number:""
			};
		},
		computed: {
			...mapGetters(['getUserInfo'])
		},
		onLoad() {
			this.userName = this.getUserInfo.userName;
			this.nickName = this.getUserInfo.nickName;
			this.name = this.getUserInfo.name;
			this.sex = this.getUserInfo.sex == "0" ? "男" : "女";
			this.number = this.getUserInfo.number;
			this.avatar = this.getUserInfo.avatar == "" ? "../../static/profile.jpg" : "http://localhost:8088" + this
				.getUserInfo.avatar;
		},

		mounted() {},

		methods: {
			/**
			 * 点击触发
			 * @param {Object} type 跳转页面名或者类型方式
			 */
			fnClick(type) {
				if (type == 'modify') {
					uni.navigateTo({
						url: '/pages/user/modify/modify'
					})
				}
			},
			logout(){
				uni.clearStorage();
				// 更新Vuex中的数据
				this.$store.commit('setNeedAuth',true);
				this.$store.commit('setIsLogin',false);
				this.$store.commit('setUserInfo','');
				uni.reLaunch({
					url: '/pages/login/login'
				})
			}
		}
	}
</script>

<style>
	.btn-logout {
		margin-top: 100upx;
		width: 80%;
		border-radius: 50upx;
		font-size: 16px;
		color: #fff;
		background: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%);
	}

	.btn-logout-hover {
		background: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%);
	}
</style>
